<template>
  <a-modal
    title="新建"
    :width="840"
    :visible="visible"
    :confirmLoading="loading"
    @ok="modalOk"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <!-- 检查是否有 id 并且大于0，大于0是修改。其他是新增，新增不显示主键ID -->
        <a-form-item v-show="model && model.id" label="主键ID">
          <a-input v-decorator="['id', { initialValue: model.id }]" disabled />
        </a-form-item>
        <a-form-item label="投递信息">
          <a-button type="primary" @click="toSelectDelivery">选择投递信息</a-button>
        </a-form-item>
        <s-table
          ref="table"
          :columns="columns"
          :data="loadData"
          :row-key="(record)=>record.id"
          :showPagination="false"
        >
        </s-table>
      </a-form>
    </a-spin>
    <SelectDelivery :visible="selectDeliveryVisible" :model="this.model" @cancel="()=>{this.selectDeliveryVisible=false}" @OnSelect="onSelectDelivery" />
  </a-modal>
</template>

<script>
// 审核状态 0=待审核 1=待开票 2=待发行 3=已完成
// import pick from 'lodash.pick'
import { getRecord, putRecord } from '@/api/manage'
import { notification } from 'ant-design-vue'
import SelectDelivery from './SelectDelivery'
import { STable } from '@/components'
// import { addDeliveries, putDeliveries, getRecordLists, getStationRecord } from '@/api/manage'
const fields = ['id', 'recordId']

export default {
  name: 'BandTicket',
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      }
    }
    return {
      thisDeliverys: [],
      columns: [
        {
          title: '#',
          dataIndex: 'id'
        },
        {
          title: '详细地址',
          dataIndex: 'detailedAddress'
        },
        {
          title: '订阅类型',
          dataIndex: 'subscriptionType'
        },
        {
          title: '投递人员',
          dataIndex: 'member.name'
        },
        {
          title: '份数',
          dataIndex: 'subscriptionCount'
        },
        {
          title: '收订员',
          dataIndex: 'subScriptioner'
        },
        {
          title: '状态',
          dataIndex: 'submitState'
        }
      ],
      loadData: (parameter) => {
        return new Promise((resolve, reject) => {
          resolve()
        }).then(res => {
          console.log(this.thisDeliverys)
          return {
            data: this.thisDeliverys,
            totalCount: this.thisDeliverys.length,
            pageNo: 1,
            pageSize: 10
          }
        })
      },
      selectDeliveryVisible: false,
      targetKeys: [],
      selectedKeys: [],
      targetSelectedKeys: [],
      recordList: [],
      originRecordList: [],
      form: this.$form.createForm(this),
      memberList: [],
      customerList: [],
      stationRecordList: []
    }
  },
  components: {
    SelectDelivery,
    STable
  },
  watch: {
    visible (news) {
      if (news) {
        getRecord(this.model.id).then(res => {
          this.thisDeliverys = res.data.deliveries
          console.log(this.thisDeliverys)
          this.$refs.table.refresh(true)
        })
      }
    }
  },
  created () {
    // 防止表单未注册
    fields.forEach(v => this.form.getFieldDecorator(v))
  },
  methods: {
    onSelectDelivery (deliverys) {
      this.selectDeliveryVisible = false
      this.thisDeliverys = deliverys
      this.$refs.table.refresh(true)
    },
    toSelectDelivery () {
      this.selectDeliveryVisible = true
    },
    handleChange (nextTargetKeys, direction, moveKeys) {
      this.targetKeys = nextTargetKeys

      console.log('targetKeys: ', nextTargetKeys)
      console.log('direction: ', direction)
      console.log('moveKeys: ', moveKeys)
    },
    handleSelectChange (sourceSelectedKeys, targetSelectedKeys) {
      this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys]

      console.log('sourceSelectedKeys: ', sourceSelectedKeys)
      console.log('targetSelectedKeys: ', targetSelectedKeys)
    },
    handleScroll () {
      // console.log(putDeliveries, addDeliveries)
    },
    modalOk () {
      this.form.validateFieldsAndScroll((errors, values) => {
        if (!errors) {
          const dict = this.model
          dict.recordId = (this.thisRecords.length <= 0) ? null : this.thisRecords[0].id
          putRecord(dict.id, dict).then(res => {
            notification.success({
              message: '提示',
              description: '更新发票成功'
            })
            this.$emit('cancel')
          }).catch(e => {
            notification.error({
              message: '提示',
              description: '更新发票失败'
            })
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
